<template>
	<view class="tradition-card" :class="innerData.name">
	<view class="card fboxRow tradition-right" :class="'pattern'+pattern" v-if="innerData.position == 'right'">
		<view class="info-wrap" :style="{'backgroundImage': 'url('+innerData.bgCon+')'}">
			<view class="info-box">
				<view class="company fboxRow Ycenter">
					<image class="logo" v-if="detail.companyLogo" :src="detail.companyLogo" mode="aspectFill"></image>
					<text class="company-name fboxRow Ycenter font-ell1 font26">{{detail.firstCompanyName || detail.companyName || ''}}</text>
				</view>
				<!-- <view class="user" :style="innerData.userBock"> -->
				<view class="user" :style="innerData.userBock ? innerData.userBock : `backgroundImage: url(${innerData.bgBlock})`">
				<!-- <view class="user" :style="innerData.userBock ? innerData.userBock : {'backgroundImage': 'url('+innerData.bgBlock+')'}"> -->
					<view class="name font36 fboxRow Ycenter">
						<text class="name-inner">{{ detail.realName }}</text>
						<text v-if="detail.isMemberAuth" class="bwfont bw-a-zu5297"></text>
					</view>
					<view class="mt8 industry font-ell1 fboxRow Ycenter font22 lh32">{{ detail.firstPositionName || '' }}</view>
				</view>
				<view class="fboxRow mt24 item Ycenter" v-if="detail.mobile" @tap="callPhone">
					<view class="left"><text class="bwfont bw-dianhua5"></text></view>
					<view class="center fboxRow Ycenter flex1" :class="[detail.mobile == '不可见(需双方交换名片)'?'font22': 'font24' ]">{{ detail.mobile || '' }}</view>
				</view>
				<view class="fboxRow item" v-if="detail.addressInfo" @tap="goMap">
					<view class="left"><text class="bwfont bw-dingwei1"></text></view>
					<view class="center font-ell2 address fboxRow Ycenter flex1" :class="[detail.addressInfo == '不可见(需双方交换名片)'?'font22': 'font24' ]">{{ detail.addressInfo || '' }}</view>
				</view>
			</view>
		</view>
		<view class="flex1"></view>
		<image class="avatar" :src="detail.avatar || detail.imagePhoto" mode="aspectFill"></image>
		<view class="image-audio bg-linear" @click="playAudio" v-if="(detail.voiceType == 1 || detail.voiceType == 2) && isAudio">
			<view class="icon_box">
				
				<view class="bar bar1" :class="barState" id="bar0" style="height: 10rpx;"></view>
				<view class="bar bar2" :class="barState" id="bar1" style="height: 20rpx;"></view>
				<view class="bar bar3" :class="barState" id="bar2" style="height: 50rpx;"></view>
				<view class="bar bar4" :class="barState" id="bar3" style="height: 60rpx;"></view>
				<view class="bar bar5" :class="barState" id="bar4" style="height: 30rpx;"></view>
				<view class="bar bar6" :class="barState" id="bar5" style="height: 15rpx;"></view>
			</view>
		</view>
		<view class="icon-code fboxRow Ycenter Xcenter" v-if="isCode" @tap="goPage('qrcode')"><text class="bwfont bw-erweima1 color-BF8355 font32"></text></view>
	</view>
	<view class="card tradition-left fboxRow" :class="'pattern'+pattern" v-else>
		<view class="icon-code fboxRow Ycenter Xcenter" v-if="isCode" @tap="goPage('qrcode')"><text class="bwfont bw-erweima1 color-BF8355 font32"></text></view>
		<image class="avatar" :src="detail.avatar || detail.imagePhoto" mode="aspectFill"></image>
		<view class="flex1"></view>
		<view class="info-wrap" :style="{'backgroundImage': 'url('+innerData.bgConR+')'}">
			<view class="info-box">
				<view class="company fboxRow Ycenter">
					<image class="logo" v-if="detail.companyLogo" :src="detail.companyLogo" mode="aspectFill"></image>
					<text class="company-name fboxRow Ycenter font-ell1 font26">{{detail.firstCompanyName || detail.companyName || ''}}</text>
				</view>
				<!-- <view class="user" :style="innerData.userBock"> -->
				<view class="user" :style="innerData.userBock ? innerData.userBock : `backgroundImage: url(${innerData.bgBlock})`">
					<view class="name font36 fboxRow Ycenter">
						<text class="name-inner">{{ detail.realName }}</text>
						<text v-if="detail.isMemberAuth" class="bwfont bw-a-zu5297"></text>
					</view>
					<view class="mt8 industry font-ell1 fboxRow Ycenter font22 lh32">{{ detail.firstCompanyName || '' }}</view>
				</view>
				<view class="fboxRow mt24 item Ycenter Xend" v-if="detail.mobile" @tap="callPhone">
					<view class="center fboxRow Ycenter Xend flex1" :class="[detail.mobile == '不可见(需双方交换名片)'?'font22': 'font24' ]">{{ detail.mobile || '' }}</view>
					<view class="left"><text class="bwfont bw-dianhua5"></text></view>
				</view>
				<view class="fboxRow item Xend" v-if="detail.addressInfo" @tap="goMap">
					<view class="center font-ell2 address fboxRow Ycenter Xend flex1" :class="[detail.addressInfo == '不可见(需双方交换名片)'?'font22': 'font24' ]">{{ detail.addressInfo || '' }}</view>
					<view class="left"><text class="bwfont bw-dingwei1"></text></view>
				</view>
			</view>
		</view>
		<view class="image-audio bg-linear" @click="playAudio" v-if="(detail.voiceType == 1 || detail.voiceType == 2) && isAudio">
			<view class="icon_box">
				<view class="bar bar1" :class="barState" id="bar0" style="height: 10rpx;"></view>
				<view class="bar bar2" :class="barState" id="bar1" style="height: 20rpx;"></view>
				<view class="bar bar3" :class="barState" id="bar2" style="height: 50rpx;"></view>
				<view class="bar bar4" :class="barState" id="bar3" style="height: 60rpx;"></view>
				<view class="bar bar5" :class="barState" id="bar4" style="height: 30rpx;"></view>
				<view class="bar bar6" :class="barState" id="bar5" style="height: 15rpx;"></view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
export default {
	props: {
		detail: {
			type: Object,
			defaul: () => {
				return {};
			}
		},
		innerData: {
			type: Object,
			defaul: () => {
				return {
					// bg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-7.png',
					// bgCon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/tradition-head-7.png',
					// bgConR: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/tradition-head-7.png',
					// bgRipple: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-ripple-7.png',
					// bgBlock: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-block-7.png',
					// userBock: '',
					// position: 'right',
				};
			}
		},
		pattern: {
			type: [String, Number],
			default: '0'
		},
		barState: {
			type: String,
			default: ''
		},
		isCode: {
			type: Boolean,
			default: true
		},
		isAudio: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return { };
	},
	methods: {
		goPage(url) {
			this.$pageTo('/card/qrcode?memberId=' + this.detail.cardId);
		},
		playAudio(){
			this.$emit('playAudio')
		}
	}
};
</script>

<style lang="scss" scoped>
.tradition-card{color: #FFF9F3;}
.tradition-card .card {position: relative;width: 670rpx;height: 360rpx;border-radius: 12rpx;overflow: hidden;}
.tradition-card .avatar {position: relative;z-index: 1;width: 440rpx;height: 360rpx;}
.tradition-card .name-inner{max-width: 140rpx;height: 36rpx;line-height: 36rpx;overflow: hidden;}
.tradition-card .name .bwfont{ margin-left: 12rpx;color: #FFF3B6;font-size: 28rpx;}
.tradition-card .company-name{max-width: 200rpx;opacity: .8;}
.tradition-card .company{padding: 28rpx 0 14rpx  28rpx;line-height: 36rpx;}
.tradition-card .company .logo{width: 28rpx;height: 28rpx;margin-right: 10rpx;border-radius: 6rpx;}
.tradition-card .user{padding: 14rpx 0 14rpx  28rpx;height: 104rpx; color:#fff; background: no-repeat left center/cover;}
.tradition-card	.tag-auth{ margin-left: 12rpx; padding: 0 12rpx; height: 36rpx;background: var(--backgroundDivisionColor);border-radius: 4rpx}
.tradition-card .item{padding: 0 0 10rpx 28rpx; font-weight: 200;}
.tradition-card .item .bwfont{margin-right: 10rpx;font-size: 28rpx;color: #fff}
// color:#F9D4B8
.tradition-card .address{height: 74rpx;line-height: 36rpx;}
.tradition-card .code {color: #27211a;}
.tradition-card .info-wrap {position: absolute;left: 0;top: 0;padding: 0 80rpx 0 0;width: 397rpx;height: 360rpx;z-index: 2;line-height: 32rpx;background:  no-repeat left center/cover;}
// .tradition-card .info-wrap::before{content: '';position: absolute;left: 0;top: 0;  width: 397rpx;height: 360rpx;z-index: 2;background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/tradition-head.png') no-repeat left center/cover;}
.tradition-card .info-wrap .name {height: 36rpx;line-height: 36rpx;font-weight: 500;}
.tradition-card .info-wrap .name .bwfont{height: 36rpx;line-height: 36rpx;}
.tradition-card .icon-code{position: absolute;right:0;top: 0;z-index: 4;width: 66rpx;height: 66rpx;}
.tradition-card .icon {width: 40rpx;height: 40rpx;}
.tradition-card .icon-audio {width: 56rpx;height: 56rpx;}
.tradition-card .image-audio{bottom: 50%;z-index: 4;margin-bottom: -56rpx;transform: scale(.7)}
.tradition-card .info-box{position: relative;z-index: 4;}

.tradition-left{}
.tradition-left .address{text-align: right;}
.tradition-left .company{padding-left: 120rpx;}
.tradition-left .company-name{max-width: 140rpx;height: 36rpx; line-height: 36rpx; overflow: hidden;}
.tradition-left .user{padding: 14rpx 28rpx 14rpx 140rpx;background: linear-gradient(90deg, transparent 0%, var(--rampButtonBackStartColor) 100%);}
.tradition-left .info-wrap{right: 0;left: unset;padding: 0 0 0 74rpx;overflow:hidden}
.tradition-left .icon-code{position: absolute;left:0;top: 0;z-index: 4;width: 66rpx;height: 66rpx;}
// .tradition-left .info-wrap::before{transform: rotateY(180deg);}
.tradition-left .item{padding-right: 24rpx;padding-left: 0;}
.tradition-left .item .left{position: relative; transform: rotateY(180deg);}
.image-audio {position: absolute;bottom: -56rpx;left: 50%;margin-left: -56rpx;width: 112rpx;height: 112rpx;border-radius: 50%;overflow: hidden;}
.icon_box {height: 112rpx;width: 70rpx;position: absolute;top: 0;left: 30rpx;overflow: hidden;display: flex;align-items: center}
.icon_box .bar {width: 6rpx;border-radius: 6rpx;background-color: #fff;margin-right: 5rpx;animation: equalize 4s 0s infinite;animation-play-state: paused;}


.icon_box .bar-paused{animation-play-state: paused;}
.icon_box .bar-running{animation-play-state: running;}
.icon_box .bar1 { animation-delay: -1.9s;}
.icon_box .bar2 {animation-delay: -2s;}
.icon_box .bar3 {animation-delay: -2.3s;}
.icon_box .bar4 {animation-delay: -2.4s;}
.icon_box .bar5 {animation-delay: -2.1s;}
.icon_box .bar6 {animation-delay: -2.7s;}
@keyframes equalize {
	0% {height: 60rpx;}
	4% {height: 50rpx;}
	8% {height: 40rpx;}
	12% {height: 30rpx;}
	16% {height: 20rpx;}
	20% {height: 30rpx;}
	24% {height: 40rpx;}
	28% {height: 10rpx;}
	32% {height: 40rpx;}
	36% {height: 30rpx;}
	40% {height: 20rpx;}
	44% {height: 40rpx;}
	48% {height: 10rpx;}
	52% {height: 30rpx;}
	56% {height: 40rpx;}
	60% {height: 30rpx;}
	64% {height: 60rpx;}
	68% {height: 20rpx;}
	72% {height: 50rpx;}
	76% {height: 10rpx;}
	80% {height: 20rpx;}
	84% {height: 60rpx;}
	88% {height: 50rpx;}
	92% {height: 60rpx;}
	96% {height: 20rpx;}
	100% {height: 30rpx;}
}


[data-tradition='newYear'],.newYear{
	.image-audio {background: linear-gradient(360deg, #FF4033 3%, #FFBD8E 100%)}
}

[data-tradition='newYear2'],.newYear2{
	.image-audio {background: linear-gradient(360deg, #FF5219 2%, #FFBE90 100%);}
}
[data-tradition='golden'],.golden{
	.image-audio {background: linear-gradient(180deg, #D8A37A 0%, #AD7B54 100%);}
}
[data-tradition='turquoise'],.turquoise{
	.image-audio {background: linear-gradient(180deg, #0092A8 0%, #037299 100%);}
}
[data-tradition='fuchsia'],.fuchsia{
	.image-audio {background: linear-gradient(205deg, #FF8ECC 0%, #8130FA 100%);}
}
</style>
